{% extends 'teacher-base.html' %}
{% load staticfiles %}
{% block title %}
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{% static 'js/plugins/datatables/css/jquery.dataTables.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/plugins/datatables/js/jquery.dataTables.js' %}"></script>


    <script type="text/javascript">


        $(function () {
            var table = $('#course').DataTable({

                "pagingType": "full_numbers",
                "bSort": true,
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                "columnDefs": [{
                    "searchable": false,
                    "orderable": true,
                    "targets": 0
                }],
                "order": [[1, 'asc']]
            });
            table.on('order.dt search.dt', function () {
                table.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();

            $('#course tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });


            $("#btn_add").click(function () {
                $("#addBook").modal()
            });

            $('#btn_edit').click(function () {
                if (table.rows('.selected').data().length) {
                    $("#editBookInfo").modal()
                    var rowData = table.rows('.selected').data()[0];
                    ts = $.trim(rowData[1])
                    $('.course option:contains("' + ts + '")').attr('selected', 'selected')
                    $("#editBookModal").find("input[name='sta_time']").val(rowData[2]);
                    $("#editBookModal").find("input[name='end_time']").val(rowData[3]);
                    $("#editBookModal").find("input[name='couid']").val(rowData[4]);


                } else {
                    alert('请选择项目');
                }


            });


            $("#cancelEdit").click(function () {

                $("#editBookModal").find('input').val('')
            })

            $('#btn_delete').click(function () {
                if (table.rows('.selected').data().length) {
                    $("#deleteBook").modal()
                } else {
                    alert('请选择项目');
                }
            });

            $('#delete').click(function () {
                var rowData = table.rows('.selected').data()[0];
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/teacher/declist",
                    async: false,
                    data: {
                        "_id": rowData[4],

                    },
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (req) {
                        if (req.status == 'ok') {
                            location.href = "{% url 'teacher:addclist' %}";
                            location.reload();
                        }
                    },


                });
            });


        })

    </script>
    <style>
        .content {
            margin: 0px auto;
            border: 1px solid #ccc;
        }

        .operation {
            margin: 10px;
        }

        .operation > button {
            margin: 10px;
        }

        #books_length {
            float: left;
            margin-left: 20px;
        }

        #books_filter {
            float: right;
            margin-right: 20px;
        }

        #books {
            margin: 5px;
        }

        .center-block {
            display: block;
            width: 21%;
            margin: auto;
        }
    </style>



{% endblock %}

<html>
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'teacher:teacher_info' %}">个人中心</a>></li>
                <li>添加课程表</li>
            </ul>
        </div>

    </section>
{% endblock %}
{% block right_content %}
    {% load static %}
    <div class="right">
        <section class="content">
            <div class="btn-group operation">
                <button id="btn_add" type="button" class="btn bg-primary">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn bg-info">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-success">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <div class="modal fade" id="addBook" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">添加课程表</h4>
                        </div>


                        <form autocomplete="off" method="post" action="{% url 'teacher:addclist' %}"
                              enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="form-horizontal">

                                    <div class="form-group">
                                        <label for="course" class="col-sm-2 control-label">课程名称:*</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" name="course">
                                                <option>请选择类别</option>{% for course in all_course %}
                                                <option value={{ course.id }}>{{ course }}</option>{% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="sta_time" class="col-sm-2 control-label">开始时间:*</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" id="sta_time" name="sta_time" type="text">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="end_time" class="col-sm-2 control-label">结束时间:*</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" id="end_time" name="end_time" type="text">
                                        </div>
                                    </div>

                                    <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">
                                        取消
                                    </button>
                                    <button id="addBooksInfo" type="submit" class="btn btn-success">保存</button>

                                </div>
                            </div>
                        </form>
                    </div>


                </div>
            </div>


            <div class="modal fade" id="editBookInfo" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">修改课程内容</h4>
                        </div>
                        <form autocomplete="off" method="post" action="{% url 'teacher:upclist' %}"
                              enctype="multipart/form-data">
                            {% csrf_token %}
                            <div id="editBookModal" class="modal-body">
                                <div class="form-horizontal">

                                    <div class="form-group">
                                        <label for="course" class="col-sm-2 control-label">课程名称:*</label>
                                        <div class="col-sm-10">
                                            <select class="form-control course" name="course">
                                                <option>请选择课程</option>{% for course in all_course %}
                                                <option class="course_{{ course.id }}"
                                                        value={{ course.id }}>{{ course }}</option>{% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="sta_time" class="col-sm-2 control-label">开始时间:*</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" id="sta_time" name="sta_time" type="date">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="end_time" class="col-sm-2 control-label">结束时间:*</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" id="end_time" name="end_time" type="time">
                                        </div>
                                    </div>
                                    <input class="form-control" id="couid" name="couid" type="text"
                                           style="display: none">
                                </div>
                            </div>

                            <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消
                            </button>
                            <button id="saveEdit" type="submit" class="btn btn-success">保存</button>
                        </form>

                    </div>
                </div>
            </div>


            <div class="modal fade" id="deleteBook" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">确认要删除吗？</h4>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button>
                        </div>
                    </div>
                </div>
            </div>

            <table id="course" class="table table-striped table-bordered row-border hover order-column" cellspacing="0"
                   width="100%">
                <thead>
                <tr>
                    <th></th>
                    <th>课程名称</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th style="display: none"></th>

                </tr>
                </thead>

                <tbody id="b_{{ cou_id }}"> {% for cou in all_coustlist %}
                    <tr>
                        <td></td>
                        <td>{{ cou.course }}</td>
                        <td>{{ cou.sta_time |date:'yy-m-d' }}</td>
                        <td>{{ cou.end_time |date:'yy-m-d'}}</td>

                        <td style="display: none">{{ cou.id }}</td>
                    </tr>

                {% endfor %}
                </tbody>
            </table>
        </section>
    </div>



    </html>{% endblock %}